import React from 'react'
import { connect } from 'react-redux'
import { Label } from 'semantic-ui-react'
import ListTable from 'components/ListTable'
import { listTable as listTableDuck } from 'ducks'
import getTagPageInfo from 'graphql/project/config/tagPageInfo.graphql'
import getTag from 'graphql/project/config/tagList.graphql'
import deleteTag from 'graphql/project/config/deleteTag.graphql'
import Icons from 'utils/constents/icons'

const FileList = actionInit => ({ data }) => {
  const makeOpt = id => [
    {
      src: Icons.DELETE,
      text: '删除',
      action: () => actionInit({
        graphqlAction: deleteTag,
        submitValues: { id },
        icon: 'trash alternate',
        title: ' 删除标签',
        message: '请注意：删除标签并不会删除该已经拥有该标签的标注',
      }),
    },
  ]
  return (
    <React.Fragment>
      {data.tag.map(tag => (
        <ListTable.Row>
          <ListTable.Cell>{tag.name}</ListTable.Cell>
          <ListTable.Cell>
            <Label circular style={{ backgroundColor: `${tag.config.color}` }} size="mini" />
          </ListTable.Cell>
          <ListTable.Cell>{tag.level}</ListTable.Cell>
          <ListTable.Cell>{tag.config.tagType}</ListTable.Cell>
          <ListTable.Action width={2} options={makeOpt(tag.id)} />
        </ListTable.Row>
      ))}
    </React.Fragment>
  )
}

const TagsView = ({ project, actionOpen }) => {
  const { projectId } = project
  const RenderList = FileList(actionOpen)
  const newUrl = `/project/${project.orgName}/${project.projectName}/config/tag/new`
  return (
    <ListTable
      globalActions={[
        {
          text: '添加新标签',
          url: newUrl,
        },
      ]}
      search={{ text: '搜索' }}
      sort
      pagination={{
        query: getTagPageInfo,
        name: 'tag_aggregate',
        variables: {
          projectId,
        },
      }}
      listData={{
        query: getTag,
        variables: {
          projectId,
          order: [],
          limit: 10,
        },
        header: (
          <ListTable.Header>
            <ListTable.HeaderCell>名称</ListTable.HeaderCell>
            <ListTable.HeaderCell>颜色</ListTable.HeaderCell>
            <ListTable.HeaderCell>级别</ListTable.HeaderCell>
            <ListTable.HeaderCell>类型</ListTable.HeaderCell>
            <ListTable.HeaderCell />
          </ListTable.Header>
        ),
        render: <RenderList />,
      }}
      holder={{
        description: '没有任何标签',
        action: {
          text: '添加标签',
          url: newUrl,
        },
      }}
    />
  )
}

const mapDispatchToProps = {
  actionOpen: listTableDuck.creators.actionOpen,
}

export default connect(
  null,
  mapDispatchToProps,
)(TagsView)
